<template>
  <div class="container">
    <!-- 第1行 -->
    <div class="row-a">
      <el-row :gutter="10" justify="start">
        <el-col :span="3" class="left-aligned">
          <el-button type="primary" @click="create">创作</el-button>
        </el-col>
        <el-col :span="2" class="left-aligned">
          <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
        </el-col>
        <el-col :span="2" class="left-aligned">
          <el-button type="danger" @click="deleteSelected">删除</el-button>
        </el-col>
        <el-col :span="3" class="left-aligned">
          <el-button @click="cancelSelection">取消多选</el-button>
        </el-col>
        <el-col :span="8" :push="5">
          <el-input placeholder="搜索作品" v-model="searchText" @input="handleSearch" clearable>
            <template #append>
              <el-button :icon="Search" @click="handleSearch"></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <!-- 第2行 -->
    <div ref="rowB" class="row-b">
      <el-row :gutter="10" justify="start" class="scrollable-row">
        <el-col :span="8" v-for="(item, index) in items" :key="index">
          <el-card class="box-card">
            <div class="card-content">
              <!-- 第1行 -->
              <div class="header">
                <div style="height: 68px;">
                  <div class="avatar-name">
                    <img :src="baseUrl + item.Avatarimage" alt="头像" class="avatar" />
                    <span>{{ item.voiceDisplayName }}</span>
                  </div>
                  <div class="tags">
                    <!-- <el-tag>影视</el-tag>
                    <el-tag>正常</el-tag> -->
                    <el-tag>{{ item.rate }}X</el-tag>
                    <el-tag>音调{{ item.pitch }}</el-tag>
                  </div>
                </div>

                <div class="description">
                  <el-input type="textarea" :rows="2" :readonly="false" v-model="item.text" resize="none"
                    input-style="height: 90px;"></el-input>
                </div>
              </div>
              <!-- 第2行 -->
              <div class="middle">
                <el-text size="small" style="margin-left: 10px;">{{ item.title }}</el-text>
                <el-checkbox style="margin-left: auto; margin-right: 10px;" v-model="item.selected"></el-checkbox>
              </div>
              <!-- 第3行 -->
              <div class="footer">
                <el-text size="small">{{ item.updatetime }} 修改</el-text>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "WorksLibrary"
}
</script>

<script setup lang="ts">
// 导入 Vue 的响应式和生命周期钩子
import { ref, onMounted, onBeforeUnmount } from 'vue';
// 导入 Axios 用于发送 HTTP 请求
import axios from 'axios';
// 导入 Vue Router 的钩子用于路由导航和控制
import { useRouter, useRoute } from 'vue-router';
// 导入 Element Plus 的搜索图标组件
import { Search } from '@element-plus/icons-vue';
// 导入自定义类型定义
import { VoiceActor, IAudioRecord, AudioRecord, GetBaseURL } from '../../composables/types';
// 导入 Element Plus 的消息提示、气泡弹出框和消息框组件
import { ElMessage, ElPopover, ElMessageBox } from 'element-plus'

// 接口地址
const baseUrl: string = GetBaseURL();
// 路由相关
const router = useRouter();
const route = useRoute();
//全选框状态
const selectAll = ref(false);
// 搜索文本
const searchText = ref('');
//作品数组
const items = ref<AudioRecord[]>([]);
//div引用
const rowB = ref<HTMLElement | null>(null);

///成功提示
const successMessge = (value: string) => {
  ElMessage({
    message: value,
    type: 'success',
  })
}
//错误提示
const errorMessge = (value: string) => {
  ElMessage.error(value)
}

// 获取初始数据
onMounted(() => {
  fetchItems();
});

/**
 * 加载声音演员列表
 * 该函数通过发送GET请求来获取声音演员列表数据，并处理相关逻辑
 */
async function loadVoiceList(): Promise<VoiceActor[]> {
  // 发起GET请求，获取声音演员列表数据
  let dataItems: VoiceActor[] | undefined = undefined;

  // 发送GET请求获取声音演员数据
  await axios.get(baseUrl + '/api/tts/tts/getVoice', {
    headers: {
      'Content-Type': 'application/json',
    }
  })
    .then(response => {
      // 处理响应数据
      dataItems = response.data as VoiceActor[];

      //处理头像地址,加上基地址
      for (let i = 0; i < dataItems.length; i++) {
        dataItems[i].Avatarimage = baseUrl + dataItems[i].Avatarimage;
      }
      return dataItems;
    })
    .catch(error => {
      // 处理错误
      console.log(error)
    });
}

// 异步函数fetchItems用于获取和处理音频记录数据
const fetchItems = async () => {
  /**
   * 异步函数fetchItems用于获取和处理音频记录数据
   * 该函数首先调用loadVoiceList函数获取声音演员列表数据，然后创建并填充多个AudioRecord实例，
   * 最后将这些实例添加到items数组中。
   */

  // 初始化索引变量index用于后续查找配音员头像
  let index: number = 0;

  // 创建AudioRecord实例item，用于存储音频记录信息
  let item: AudioRecord = new AudioRecord();

  // 定义dataItems变量以存储获取的声音演员列表数据，初始值为undefined
  let dataItems: VoiceActor[] | undefined = undefined;

  // 尝试获取声音演员列表数据
  try {
    // 调用loadVoiceList函数异步获取声音演员列表数据
    dataItems = await loadVoiceList();

    // 循环4次，每次创建并填充一个AudioRecord实例，然后添加到items数组中
    for (let i: number = 0; i < 20; i++) {
      // 初始化AudioRecord实例item
      item = new AudioRecord();

      // 设置音频记录的标题为'未命名作品'
      item.title = '未命名作品';

      // 设置配音员显示名称为'配音员'
      item.voiceDisplayName = '配音员';

      // 设置音频记录的文本内容为'小说文本'
      item.text = '小说文本';

      // 设置音频记录的更新时间为'2023-06-06'
      item.updatetime = '2023-06-06';

      // 设置音频记录的语速为'1.0'
      item.rate = '1.0';

      // 设置音频记录的音调为'0'
      item.pitch = '0';

      // 设置音频记录的配音员头像地址,下面是测试地址
      item.Avatarimage = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';

      // 查找与当前音频记录关联的配音员头像地址
      if (dataItems) {
        index = dataItems.findIndex((b) => { return b.ShortName === item.voiceShortName });
        // 如果找到匹配的配音员，则复制其头像地址到当前音频记录
        if (index >= 0) {
          item.Avatarimage = dataItems[index].Avatarimage;
        }
      }

      // 将填充好的音频记录添加到items数组中
      items.value.push(item);
    }

    // 以下代码被注释掉，未执行
    // const response = await axios.get('/api/items');
    // items.value = response.data.map(item => ({ ...item, selected: false }));
  } catch (error) {
    // 如果获取数据失败，则在控制台输出错误信息
    console.error('获取数据失败:', error);
  }
};

/**
 * 全选/取消全选功能
 * 此函数用于将所有项目标记为选定或取消选定状态
 * @param {boolean} value - 表示是否选定所有项目的布尔值 true表示选定，false表示取消选定
 */
const handleSelectAll = (value) => {
  items.value.forEach(item => {
    item.selected = value;
  });
};

/**
 * 删除所有选中的项目
 * 
 * 该函数通过过滤items数组中的项目来实现删除操作，仅保留未选中的项目
 * 这种方式避免了直接操作DOM或在循环中删除元素可能导致的问题
 */
const deleteSelected = () => {
  items.value = items.value.filter(item => !item.selected);
  successMessge('删除成功,未开发完成');
};

// 取消取消多选
const cancelSelection = () => {
  items.value.forEach(item => {
    item.selected = false;
  });
};

// 搜索作品
const handleSearch = () => {
  axios.get('/api/search', { params: { text: searchText.value } })
    .then(response => {
      items.value = response.data.map(item => ({ ...item, selected: false }));
    })
    .catch(error => {
      console.error('搜索失败:', error);
    });

  successMessge('搜索成功,未开发完成');
};

//转到配音制作页面
const create = () => {
  // 转到配音制作页面
  router.push({ path: "/" })
};

// 动态设置rowB的高度
const setRowBHeight = () => {
  // 如果rowB存在，则设置其高度为窗口高度的80%
  if (rowB.value) {
    rowB.value.style.height = `${window.innerHeight *0.8}px`;
  }
};

// 在组件挂载完成后执行
onMounted(() => {
  // 获取数据项
  fetchItems();
  // 初始化时设置rowB的高度
  setRowBHeight();
  // 当窗口大小变化时，调整rowB的高度
  window.addEventListener('resize', setRowBHeight);
});

// 在组件卸载前执行
onBeforeUnmount(() => {
  // 移除窗口大小变化的事件监听器，以防止内存泄漏
  window.removeEventListener('resize', setRowBHeight);
});

</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
}

.row-a {
  margin-bottom: 10px;
  width: 100%;
}

.row-b {
  /* max-height: 800px; 设置高度为视口高度的100% */
  overflow-y: auto;
  /* 添加垂直滚动条 */
  width: 100%;
}

.scrollable-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.left-aligned {
  margin-right: 0px;
}

.right-aligned {
  width: 20%;
  margin-left: auto;
}

.box-card {
  margin-top: 5px;
  width: 297px;
  height: 262px;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 10px;
}

.header {
  padding: 4px 10px 4px 10px;
  border-radius: 10px;
  /* background-color: #f0f0f0; */
  height: 162px;
}

.avatar-name {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}

.description {
  margin-top: 5px;
  flex: 1;
  height: 94px;
}

.middle {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.footer {
  margin-top: auto;
  margin-left: 10px;
  margin-right: auto;
  margin-bottom: 14px;
}
</style>